<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid;
            padding: 12px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>type</th>
                <th>start_time</th>
                <th>path</th>
                <th>exec_time(ms)</th>
                <th>content</th>
            </tr>
        </thead>
        <template id="table-body">
            <tr>
                <td>{{ type }}</td>
                <td>{{ start_time }}</td>
                <td>{{ path }}</td>
                <td>{{ exec_time }}</td>
                <td>
                    <button data-id="{{ id }}">详情</button>
                </td>
            </tr>
        </template>
        <tbody class="table-body">
            
        </tbody>
    </table>
</body>

<script>

    async function fetchData() {
        const json = [
            {
                id: 1,
                type: 'INFO',
                path: '/mfg/getMfgName',
                exec_time: 140,
                start_time: '2024-05-01 14:34:45',
            },
            {
                id: 2,
                type: 'INFO',
                path: '/mfg/getDataWorkStaff',
                exec_time: 2400,
                start_time: '2024-05-01 14:37:45',
            }
        ]

        const tableTemplate = document.querySelector('#table-body').innerHTML
        const box = document.querySelector('.table-body')
        let childHtml = ''
        json.forEach(item => {
            let html = tableTemplate
            Object.keys(item).forEach(key => {
                html = html.replace(`{{ ${key} }}`, item[key])
            })
            childHtml += html
        })
        box.innerHTML = childHtml
    }

    document.querySelector('.table-body').addEventListener('click', e => {
        if (e.target.dataset.id) {
            
        }
    })

    fetchData()
</script>

</html>